<template>
	<view class="page">
		<image class="iwidth" :src="imgPath+'/static/big/square/pbj.jpg'" mode="widthFix"></image>
		<view class="back_btn" @click="rightClick"></view>
		<input class="search-name"  v-model="changeValue" :class="left ? 'left' : ''" @input="onKeyInput" @confirm="onKeyInput" placeholder="搜索队名" />
		<image v-if="!changeValue" class="search-image" :src="imgPath+'/static/big/square/psearch.png'" mode="widthFix"></image>
		<view class="square">
			<view class="no-data-top" v-if="topList.length == 0 && stage < 2">挑战未开始，还没有排名数据</view>
			<view class="no-data-top" v-if="topList.length == 0 && stage >= 2">
				<view>完成所有任务才能进入点赞排行榜</view>
				<view style="text-align: center;">暂未有队伍完成所有任务</view>
			</view>
			<view class="top-box" v-if="topList.length > 0">
				<view class="item-top" v-for="(v,i) in topList" :key="i" @click="goKj(v)">
					<image class="topImage" :src="imgPath+'/static/big/square/ptop.png'" mode="widthFix"></image>
					<image class="pImageB" :src="imgPath+'/static/big/square/'+(Number(i)+1)+'.png'" mode="widthFix"></image>
					<image class="pImage" :src="v.captainAvatar" mode="widthFix"></image>
					<image class="px" :src="imgPath+'/static/big/square/px.png'" mode="widthFix"></image>
					<image class="pxy" :src="imgPath+'/static/big/square/pxy.png'" mode="widthFix"></image>
					<view class="item-jd" :style="{width: v.taskCompleteTimes * 100 / 6 + '%'}"></view>
					<view class="item-jdnum">{{(v.taskCompleteTimes * 100 / 6).toFixed(0)}}%</view>
					<view class="item-name">{{v.teamName}}</view>
					<view class="topXinBox">
						<image class="topXin" :src="imgPath+'/static/big/square/topxin.png'" mode="widthFix"></image>
						<view class="item-num">{{v.voteNumber}}</view>
					</view>
				</view>
			</view>
			<view class="bottom-box">
				<view class="no-data-bottom" v-if="list.length == 0 && stage < 2">挑战未开始，还没有排名数据</view>
				<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="goBottom" :lower-threshold="60">
					<view class="item-bottom" v-for="(v,i) in list" :key="i" @click="goKj(v)">
						<image class="bottomImage" :src="imgPath+'/static/big/square/pbot.png'" mode="widthFix"></image>
						<image class="pImage" :src="v.captainAvatar" mode="widthFix"></image>
						<view class="item-index">NO.{{v.ranking}}</view>
						<view class="jd-box">
							<image class="px" :src="imgPath+'/static/big/square/px.png'" mode="widthFix"></image>
							<image class="pxy" :src="imgPath+'/static/big/square/pxy.png'" mode="widthFix"></image>
							<view class="item-jd" :style="{width: (v.taskCompleteTimes * 100 / 6) .toFixed(0)  + '%'}"></view>
							<view class="item-jdnum">{{(v.taskCompleteTimes * 100 / 6).toFixed(0)}}%</view>
							<view class="item-result" v-if="v.taskCompleteTimes / 6 == 1">完成</view>
							<view class="item-num">{{v.voteNumber}}</view>
						</view>
						<image v-if="v.isVote" class="item-dz item-dz1" mode="scaleToFill" :src="imgPath+'/static/big/square/sdz1.png'"></image>
						<image v-else class="item-dz item-dz1" mode="scaleToFill" :src="imgPath+'/static/big/square/sdz.png'"></image>
						<view v-if="!v.isVote" class="item-dz" @click.stop="dz(v)"></view>
						<view class="item-name">{{v.teamName}}</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<image class="pmore" :src="imgPath+'/static/big/square/pmore.png'" mode="widthFix"></image>
	   <BgMusic ref="bgMusic"/>
	</view>
</template>

<script>
	import http from "@/src/http";
	export default {
		data() {
			return {
				userBool:false,
				current: 0,
				list: [],
				modeShow: false,
				tsShow: false,
				isFirst: false,
				txShow: false,
				txt: '',
				start: true,
				changeValue: '',
				left: false,
				page: 1,
				topList: [],
				stage: 0,
				timeout: null
			}
		},
		onLoad(options) {
		},
		onShow() {
			this.loadData()
			this.getTop()
			this.page = 1
			this.list = []
			this.getList()
		},
		methods: {
			loadData(){
				return http.initData().then(res=>{
					// 活动阶段 0=未开始 1=组队期 2=任务期 3=任务期结束
					this.stage = res.data.config.stage
				})
			},
			dz(val) {
				const params = {
					teamId: val.id
				}
				http.vote(params).then(res=>{
					if (res.status == 0) {
						val.voteNumber = Number(val.voteNumber) + 1
						val.isVote = true;
						this.getTop()
						uni.showToast({
							title: '点赞成功'
						})
					} else {
						this.$u.toast(res.message)
					}
				})
			},
			getTop() {
				http.voteTop3().then(res=>{
					this.topList = res.data
				})
			},
			getList() {
				const params = {
				    "page": this.page,
				    "size": 7,
				    "teamName": this.changeValue
				}
				http.rankingList(params).then(res=>{
					const arr = res.data.data
					this.list = this.list.concat(arr)
				})
			},
			goKj(v){
				uni.redirectTo({
					url:`/pages/activeB/squadspace/index?teamId=${v.id}`
				});
			},
			rightClick(){
				uni.redirectTo({
					url:`/pages/activeB/square/index`
				});
			},
			goBottom(...e) {
				this.page += 1
				this.getList()
			},
			debounceSearch() {
				// 清除之前的定时器
				clearTimeout(this.timeout);

				// 设置新的定时器，延迟执行搜索逻辑
				this.timeout = setTimeout(() => {
					// 实际的搜索逻辑，这里可以调用搜索接口等
					this.page = 1
					this.list = []
					this.getList()
				}, 500); // 设置防抖的时间间隔，例如500毫秒
			},
			onKeyInput() {
				// if (this.changeValue) {
				// 	this.left = true
				// } else {
				// 	this.left = false
				// }
				this.debounceSearch()
			}
		}
	}
</script>

<style lang="scss" scoped>
.search-name {
		position: absolute;
		top: 700rpx;
		left: 35%;
		width: 441rpx;
		height: 53rpx;
		border: 1px solid #181818;
		border-radius: 20rpx;
		background-color: #fff;
		text-align: center;

		/deep/.uni-input-placeholder {
			font-size: 28rpx;
			color: #888;
			text-align: center;
		}
}
.search-image {
	width: 28rpx;
	height: 28rpx;
	position: absolute;
	top: 715rpx;
	left: 53%;
}
.left{
	text-align: left!important;
}
.back_btn {
	position: absolute;
	width: 69rpx;
	height: 87rpx;
	left: 0%;
	top: 105rpx;
}
.pmore {
		width: 77rpx;
		height: 44rpx;
		position: absolute;
		bottom: 5.5%;
		left: 50%;
		margin-left: -38.5rpx;
	}
.page{
	background-color: transparent;
	.square{
		width: 100%;
		.no-data-top {
			font-size: 28rpx;
			color: #ada8a8;
			position: absolute;
			top: 33%;
			left: 50%;
			transform: translate(-50%);
			white-space: nowrap;
		}
		.item-top {
			width: 166rpx;
			height: 208rpx;
			position: absolute;
			top: 26.2%;
			left: 40%;
			&:nth-child(2) {
				top: 28.1%;
				left: 10%;
			}
			&:nth-child(3) {
				top: 28.1%;
				left: 68%;
			}
			.item-name {
				font-size: 23rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				position: absolute;
				top: 130rpx;
				width: 166rpx;
				text-align: center;
			}
			.item-jd {
				background-color: #369eff;
				height: 24rpx;
				position: absolute;
				top: 100rpx;
				z-index: 1;
				border-radius: 13rpx;
			}
			.item-jdnum{
				font-size: 20rpx;
				position: absolute;
				top: 96rpx;
				right: 10rpx;
				z-index: 4;
			}
			.pxy{
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				top: 98rpx;
				left: 0rpx;
				z-index: 2;
			}
			.px{
				width: 25rpx;
				height: 25rpx;
				position: absolute;
				top: 98rpx;
				left: 5rpx;
				z-index: 3;
			}
			.topXinBox {
				width: 166rpx;
    		text-align: center;
				position: absolute;
				top: 174rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.topXin {
				width: 25rpx;
				height: 19rpx;
				margin-right: 15rpx;
			}
			.item-num{
				font-size: 20rpx;
			}
			.topImage {
				width: 166rpx;
				height: 28rpx;
				position: absolute;
				top: 98rpx;
				z-index: 1;
			}
			.pImageB{
				width: 33rpx;
				height: 33rpx;
				position: absolute;
				top: -6rpx;
				right: 20rpx;
				z-index: 10;
			}
			.pImage{
				width: 88rpx;
				height: 88rpx;
				position: absolute;
				top: 0rpx;
				left: 40rpx;
				border-radius: 50%;
				border: 1px solid #000;
			}
		}
		.no-data-bottom {
			font-size: 28rpx;
			color: #fff;
			position: absolute;
			top: 52%;
			left: 50%;
			transform: translate(-50%);
			white-space: nowrap;
		}
		.bottom-box {
			width: 675rpx;
			height: 583rpx;
			position: absolute;
			top: 52%;
			left: 50%;
			margin-left: -337.5rpx;
			font-size: 0;
		.item-bottom{
			position: relative;
			margin-bottom: 25rpx;
		}
		.bottomImage {
			width: 675rpx;
			height: 75rpx;
		}
		.pImage{
			width: 67rpx;
			height: 67rpx;
			position: absolute;
			left: 144rpx;
			top: 3rpx;
			border-radius: 50%;
			border: 1px solid #000;
		}
		.item-name {
			font-size: 30rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			position: absolute;
			left: 214rpx;
			top: 0rpx;
			width: 386rpx;
			text-align: left;
		}
		.item-dz {
			width: 69rpx;
			height: 57rpx;
			position: absolute;
			top: 10rpx;
			right: 20rpx;
			&.item-dz1{
				width:45rpx;
				height:33rpx;
				right:33rpx;
				top:22rpx;
			}
		}
		.jd-box {
			width: 190rpx;
			height: 24rpx;
			position: absolute;
			left: 214rpx;
			top: 48rpx;
			z-index: 1;
		}
		.item-jd {
			background-color: #369eff;
			height: 25rpx;
			position: absolute;
			left: 1rpx;
			top: -5rpx;
			z-index: 1;
			border-radius: 13rpx;
		}
		.item-jdnum{
			font-size: 20rpx;
			position: absolute;
			top: -8rpx;
			right: 10rpx;
			z-index: 4;
		}
		.item-result {
			font-size: 18rpx;
			position: absolute;
			top: -8rpx;
			left: 196rpx;
			white-space: nowrap;
		}
		.item-num{
			font-size: 20rpx;
			position: absolute;
			top: -8rpx;
			left: 284rpx;
		}
		.item-index{
			font-size: 26rpx;
			font-weight: bold;
			font-style: italic;
			position: absolute;
			top: 18rpx;
			left: 10rpx;
		}
		.pxy{
			width: 27rpx;
			height: 27rpx;
			position: absolute;
			top: -6rpx;
			left: 0rpx;
			z-index: 2;
		}
		.px{
			width: 20rpx;
			height: 20rpx;
			position: absolute;
			top: -5rpx;
			left: 4rpx;
			z-index: 3;
		}
		}
	}
}
</style>